import React, {useState} from 'react';
import {users} from "../filterData";
import MenuSingleSelect from "../../../../Common/MenuSingleSelect/MenuSingleSelect";
import Grid from "@material-ui/core/Grid";
import {makeStyles} from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  gutterBottom: {
    marginBottom: theme.spacing(2)
  }
}))

export default function UserFilter() {
  const [user, setUser] = useState(users[0]);
  const styles = useStyles();

  const handleSelectUser = (event, values) => {
    setUser(values)
  };

  return (
    <Grid item xs className={styles.gutterBottom}>
      <MenuSingleSelect
        name={"Select users"}
        dataSource={users}
        itemName={user}
        handleChange={handleSelectUser}
      />
    </Grid>
  )
}
